<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-menu/core-submenu.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="nav-service.html">
<link rel="import" href="nav-submenu.html">

<polymer-element name="nav-tree" attributes="navs">
  <template>
    <nav-service id="service" navs="{{navs}}"></nav-service>
    <core-menu selected="{{navs.selected}}">
      <template repeat="{{navs}}" id="pt">
        <template if="{{url}}">
          <core-item label="{{label}}">
            <a href="{{url}}"></a>
          </core-item>
        </template>
        <template if="{{children}}">
          <nav-submenu label="{{label}}" active="{{active}}" opened="{{active}}" selected="{{selected}}">
            <template ref="pt" repeat="{{children}}"></template>
          </nav-submenu>
        </template>
      </template>
    </core-menu>
  </template>
  <script>
    Polymer('nav-tree', {});
  </script>
</polymer-element>

